iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
1
Modern Web

前端UI軍火庫系列 第 12

[Day 12]toastr.js - 美化你的通知訊息

  • 分享至 

  • xImage
  •  

一般來說在前端要跳出通知訊息,最簡單的方式莫過於加個alert了,但使用alert其實對於UX來說並不是件好事,因為它會影響到user的操作行為,而且不同瀏覽器的顯示方式可能會有所不同,更不用說有些瀏覽器還可以在alert重複出現時,選擇把它關掉不顯示,當然這也是為了避免同樣的緒息一直出現變成畫面根本無法使用,但也讓alert變成了不穩定的未爆彈;因此像是toastr.js這類的library就可以幫助你打造美觀的提示訊息,同時也不用擔心影響到user的畫面操作。

開始使用toastr.js

由於toastr.js相依於jquery,因此使用前記得也要先加入jquery,接著加入toastr.js相關的css/js後,我們可以簡單的加入以下程式碼

toastr.success("鐵人賽~大~~平~~台!");

就可以看到畫面上出現綠色的提示訊息啦!

關於success的部分可以選擇:successinfowarningerror,而提示訊息的部分可以使用HTML,另外也可加入第2個參數當作提示訊息的標題,如下:

toastr.info('<h1>鐵人賽</h1><p>大~~平~~台!</p>', '我只是DEMO');

就可以看到如下圖的結果啦!

http://ithelp.ithome.com.tw/upload/images/20161212/20020617ZtkOXFCjek.png

程式碼DEMO:https://jsfiddle.net/wellwind/1958vL5u/

toastr.js參數設定

我們可以透過toastr.options來設定toastr.js的參數,最簡單的方式是到toastr.js demo頁面,設定你要的參數後,按下Show Toast就可以看到相關的程式碼,以下簡單介紹幾個設定值:

  • toastr.options.positionClass: 用來指定toastr顯示的位置,有八個位置可以選,分別在畫面的左上、中上、右上、左邊、右邊、左下、中下和右下。
  • toastr.options.closeButton: 是否要為提示訊息加入一個關閉的按鈕
  • toastr.options.timeout: 訊息要顯示多久才會消失
  • toastr.options.progressBar: 搭配timeout使用,會出現一個倒數的進度條,在timeout時間到時消失

toastr.js相關事件

toastr.js包含了4個事件可以使用

  • toastr.options.onShown: 顯示時的事件
  • toastr.options.onHidden: 隱藏時的事件
  • toastr.options.onclick: 滑鼠在提示訊息上面按下時的事件
  • toastr.options.onCloseClick: 滑鼠按下提示訊息的關閉按鈕時的事件

透過toastr,不僅可以提示訊息給user,也不用擔心破壞UX囉!

類似資源

  • HubSpot Messenger:比起toastr.js配色比較搭配bootstrap,這款屬於比較深色的樣式,喜歡深色風格的朋友可以玩玩看。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/12/front-end-toastr-js

不正經閒聊

把alert從你的JavaScript完全移除吧!


上一篇
[Day 11]FontAwesome - 最受歡迎的Icon Font - 超豐富圖示字型
下一篇
[Day 13]SweetAlert - 變化萬千的Dialog library
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言